import { Spin, message, Typography } from 'antd';
import React, { useEffect } from 'react';
import Image from "@/components/Image";
import { useModel } from "@umijs/max";

interface Props {
  // 是否是umirc中引用的异步路由显示的loading，是的话30秒后还存在说明发布新版本代码了已经无法访问到该chunk，则进行页面刷新。默认为true。
  isDynamicImportLoading?: boolean;
}

export default function RouteLoading(props: Props) {
  const { isDynamicImportLoading = true } = props;

  useEffect(() => {
    let timer: number;
    if (isDynamicImportLoading) {
      timer = window.setTimeout(() => {
        message.loading('正在发布新版本，即将刷新页面', 0);
        setTimeout(() => {
          window.location.reload();
        }, 2000);
      }, 30000);
    }
    return () => {
      if (timer) {
        window.clearTimeout(timer);
      }
    };
  }, []);

  return <div className={"main-loading"}>
    <div className="flex flex-col items-center">
      <Image src={require('@/assets/imgs/logo_200x.png')} style={{height: 200}} />
      <Typography.Text
        type="secondary"
        style={{fontSize: 14}}
      >加载中......
      </Typography.Text>
    </div>
  </div>;
}
